<template>
  <div ref="imgbox" class="imgbox" @click="preview(props.index, true)">
    <img :src="image" alt="" />
  </div>
  <div v-if="config.visable" class="preview">
    <img :src="config.curPrview" alt="" @click="preview('', false)" />
    <div class="arrow left" @click="prev">
      <el-icon><DArrowLeft /></el-icon>
    </div>
    <div class="arrow right" @click="next">
      <el-icon><DArrowRight /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance, watch } from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  image: {
    type: String,
    default: "",
  },
  index: {
    type: Number,
    default: 0,
  },
  imgList: {
    type: Array,
    default: [],
  },
});

const config = reactive({
  preview: "1",
  visable: false,
  curPrview: "",
  curIndex: 0,
});

function prev() {
  if (config.curIndex == 0) {
    config.curIndex = props.imgList.length;
  } else {
    config.curIndex = config.curIndex - 1;
  }
  config.curPrview = props.imgList[config.curIndex];
}
function next() {
  if (config.curIndex == props.imgList.length - 1) {
    config.curIndex = 0;
  } else {
    config.curIndex = config.curIndex + 1;
  }
  config.curPrview = props.imgList[config.curIndex];
}
function preview(index, type) {
  if (index || index == 0) {
    config.curIndex = index;
    config.curPrview = props.imgList[index];
  }
  config.visable = type;
}
onMounted(() => {
  // config.curPrview = props.image;
});
</script>

<style lang="scss">
.imgbox {
  width: 100px;
  height: 80px;
  overflow: hidden;
  transition: all 0.3s;
  margin: 20px;
  img {
    width: 100%;
    height: 100%;
  }
}
.preview {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  overflow: hidden;
  img {
    width: 100%;
    // height: 100%;
  }
  .arrow {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: #756e6e62;
    color: #000000;
    display: flex;
    font-weight: bold;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  .left {
    top: 50%;
    left: 0;
  }
  .right {
    top: 50%;
    right: 0;
  }
}
</style>